<template>
  <div>
    <el-form inline label-position="right" label-width="120px" style="margin: 50px 0 0 0;max-width:1300px;">
      <el-row :xl="24" :lg="24" :xs="24" :gutter="10">
         <el-col :lg="4" :sm="4" :xs="24">
              <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                @select="handleSelect"
                >
                <el-menu-item index="1">
                  <i class="el-icon-picture"></i>
                  <span slot="title">添加预览图</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <i class="el-icon-picture"></i>
                  <span slot="title">添加顶部图</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <i class="el-icon-picture"></i>
                  <span slot="title">添加单图组件</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-camera"></i>
                  <span slot="title">添加视频组件</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <i class="el-icon-menu"></i>
                  <span slot="title">添加轮播组件</span>
                </el-menu-item>
                <el-menu-item index="6">
                  <i class="el-icon-menu"></i>
                  <span slot="title">添加文字图</span>
                </el-menu-item>
              </el-menu>
         </el-col>
         <el-col :lg="8" :sm="10" :xs="24">
            <el-form-item label="模板名：">
              <el-input v-model="uploadData.model_name" > </el-input>
            </el-form-item>
            <el-form-item label="模板类型：">
              <el-select
               v-model="uploadData.category"
               @change="chooseCategory"
               placeholder="请选择模板类型"
               style="width:200px;"
               >
                 <el-option
                   v-for="item in categoryList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id"
                 >
                 </el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="文字标题：">
             <el-input v-model="uploadData.title" > </el-input>
           </el-form-item>
           <el-form-item label="标题字颜色：">
             <el-input v-model="uploadData.title_text_color" > </el-input>
           </el-form-item>
           <el-form-item label="标题字大小：">
             <el-input v-model="uploadData.title_text_size" > </el-input>
           </el-form-item>
            <el-form-item label="底部背景色：">
              <el-input v-model="uploadData.bottom_text_bg_color"> </el-input>
            </el-form-item>
            <el-form-item label="底部文字颜色：">
              <el-input v-model="uploadData.bottom_text_color"> </el-input>
            </el-form-item>
            <el-form-item label="预览截图："  v-if="uploadData.view_img">
               <div>
                 <img :src="uploadData.view_img" alt="" style="width:100px;">
               </div>
            </el-form-item>
            <el-form-item label="预览截图链接："  v-if="uploadData.view_img">
              <el-button type="primary" size="mini"><a target="_blank" :href="uploadData.view_img">点击查看</a></el-button>
              <el-button
                size="mini"
                type="primary"
                v-clipboard:copy="uploadData.view_img"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >
                复制链接
              </el-button>
              <el-button type="primary" size="mini" @click="modify(1)">修改</el-button>
              <el-button type="primary" size="mini" @click="delPreview('view_img')">删除</el-button>
            </el-form-item>
            <el-form-item label="顶部图：" v-if="headerImg.resource_url">
              <div>
                <img :src="headerImg.resource_url" alt="" style="width:100px;">
              </div>
            </el-form-item>
           <el-form-item  label="文字左边距："  v-if="headerImg.resource_url">
             <el-input v-model="headerImg.width"> </el-input>
           </el-form-item>
           <el-form-item  label="文字上边距："  v-if="headerImg.resource_url">
             <el-input v-model="headerImg.height"> </el-input>
           </el-form-item>
            <el-form-item label="顶部图链接：" v-if="headerImg.resource_url">
              <el-button type="primary" size="mini"><a target="_blank" :href="headerImg.resource_url">点击查看</a></el-button>
              <el-button
                size="mini"
                type="primary"
                v-clipboard:copy="headerImg.resource_url"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >
                复制链接
              </el-button>
              <el-button type="primary" size="mini" @click="modify(2)">修改</el-button>
              <el-button type="primary" size="mini" @click="delBanner(0,headerImg.resource_url)">删除</el-button>
            </el-form-item>
         </el-col>
         <el-col :lg="8" :sm="10" :xs="24" id="assembly">
           <el-form-item
                 v-for="(item, index) in uploadData.modules"
                 :key="index"
                 :index="index"
                 :item="item"
                 >
                 <!--v-if="item.module_type!=1">-->
             <div v-if="item.module_type==2">
               {{item.index}}、单图：
               <div>
                 <img :src="item.resource_url" alt="" style="width:100px;">
               </div>
               <el-button type="primary" size="mini"><a target="_blank" :href="item.resource_url">点击查看</a></el-button>
               <el-button type="primary" size="mini" @click="modify(3,item.index)">修改</el-button>
               <el-button type="primary" size="mini" @click="delModule(item.index,item.resource_url)">删除</el-button>
             </div>
             <div v-if="item.module_type==3">
               {{item.index}}、视频：{{item.resource_url}}
               <el-button type="primary" size="mini"><a target="_blank" :href="item.resource_url">点击查看</a></el-button>
               <el-button type="primary" size="mini" @click="modify(4,item.index)">修改</el-button>
               <el-button type="primary" size="mini" @click="delModule(item.index,item.resource_url)">删除</el-button>
             </div>
             <div v-if="item.module_type==4">
               {{item.index}}、轮播
               <div>
                 轮播背景图:
                 <div>
                   <img :src="item.resource_bg_url" alt="" style="width:100px;">
                 </div>
                 <el-button type="primary" size="mini" v-if="item.resource_bg_url"><a target="_blank" :href="item.resource_bg_url">点击查看</a></el-button>
                 <div>轮播背景图高：{{item.bg_height}}</div>
               </div>
               <div>
                 轮播图列表:
                 <div>
                   <div style="display:inline-block" v-for="(obj, index) in item.resource_url.split('|')"  :key="index">
                     <img :src="obj" alt="" style="width:100px;">
                     <el-button type="primary" size="mini"><a target="_blank" :href="obj">点击查看</a></el-button>
                   </div>
                 </div>


                 <div>轮播图高：{{item.height}}</div>
                 <el-button type="primary" size="mini" @click="modify(5,item.index)">修改</el-button>
                 <el-button type="primary" size="mini" @click="delModule(item.index,item.resource_url)">删除</el-button>
               </div>
             </div>
             <div v-if="item.module_type==5">
               {{item.index}}、文字图：
               <div>
                 <img :src="item.resource_url" alt="" style="width:100px;">
               </div>
               <div>文字左边距：{{item.width}}</div>
               <div>文字上边距：{{item.height}}</div>
               <el-button type="primary" size="mini"><a target="_blank" :href="item.resource_url">点击查看</a></el-button>
               <el-button type="primary" size="mini" @click="modify(6,item.index)">修改</el-button>
               <el-button type="primary" size="mini" @click="delModule(item.index,item.resource_url)">删除</el-button>
             </div>
           </el-form-item>

         </el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: center;">
           <el-button @click="submit" type="primary"> 提交 </el-button>
          <el-button  type="primary" @click="ldyList()">模板列表</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 添加预览图弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="预览图"
      :visible.sync="dialogPreview"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyPreview
            ref="preview"
            :index="index"
            @getUrl="getViewImgUrl">
          </my-ldyPreview>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加顶部图弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="顶部图"
      :visible.sync="dialogBanner"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyBanner
            ref="banner"
            :index="index"
            @getUrl="getHeaderImgUrl">
          </my-ldyBanner>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加单图弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="单图"
      :visible.sync="dialogPicture"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyImage
            ref="image"
            :index="index"
            @getUrl="getResUrl">
          </my-ldyImage>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加视频弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="视频"
      :visible.sync="dialogVideo"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyVideo
            ref="video"
            :index="index"
            @getUrl="getResUrl">
          </my-ldyVideo>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加轮播弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="轮播"
      :visible.sync="dialogSlider"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldySlider
            ref="slider"
            :index="index"
            @getUrl="getResUrl">
          </my-ldySlider>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
    <!-- 添加文字图弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :top="userAgent ? '60px' : '15vh'"
      title="文字图"
      :visible.sync="dialogTextMap"
      :width="dialogWidth"
      >
      <div class="wid-100">
        <el-form class="wid-100" label-width="120px" inline>
          <my-ldyTextImage
            ref="text"
            :index="index"
            @getUrl="getResUrl">
          </my-ldyTextImage>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
  </div>
</template>
<script>
//  import ldyUpload from "@/views/market/ldy/ldyUpload.vue";
import ldyPreview from "@/views/market/ldy/preview.vue";
import ldyBanner from "@/views/market/ldy/banner.vue";
import ldyImage from "@/views/market/ldy/image.vue";
import ldyVideo from "@/views/market/ldy/video.vue";
import ldySlider from "@/views/market/ldy/slider.vue";
import ldyTextImage from "@/views/market/ldy/textImage.vue";
export default {
  data() {
    return {
      flag: false,
      //模板类型列表
      categoryList:[],
      view_img:{
        limit: 1,
        tips:'只能上传jpg/png文件'
      },
      headerData:{
        limit: 1,
        tips:'只能上传jpg/png文件，尺寸750px*124px',
      },
      headerImg:{
         "index": 0,
         "module_type": "1",//1顶部图,2单图，3视频，4轮播，
         "resource_url": "",
          "width": "",
          "height":"",
       },
      imgList:[],
      videoList:[],
      sliderList:[],
      index:1,
      uploadData:{
        "model_name": "",
        "title": "",
        "title_text_color": "",
        "title_text_size": 0,
        "bottom_text_bg_color": "#000",
        "bottom_text_color": "#fff",
        "view_img": "",
        "category": "",
        "modules": [
//          {
//            "index": 0,
//            "module_type": "1",
//            "resource_url": "https://files.tonnn.com/202011/1604479454172322.png",
//            "resource_bg_url": "",
//            "width": 0,
//            "height": 0,
//            "bg_width": 0,
//            "bg_height": 0
//          },
//          {
//            "index": 1,
//            "module_type": "2",
//            "resource_url": "https://files.tonnn.com/202011/1604479478794902.jpg",
//            "resource_bg_url": "",
//            "width": 0,
//            "height": 0,
//            "bg_width": 0,
//            "bg_height": 0
//          },
//          {
//            "index": 2,
//            "module_type": "3",
//            "resource_url": "https://files.tonnn.com/202011/1604479494437755.mp4",
//            "resource_bg_url": "",
//            "width": 0,
//            "height": 0,
//            "bg_width": 0,
//            "bg_height": 0
//          },
//          {
//            "index": 3,
//            "module_type": "4",
//            "resource_url": "https://files.tonnn.com/202011/1604479518566660.jpg|https://files.tonnn.com/202011/1604479521922547.jpg|https://files.tonnn.com/202011/1604479525669163.jpg|https://files.tonnn.com/202011/1604479528835400.jpg",
//            "resource_bg_url": "https://files.tonnn.com/202011/1604479511193271.jpg",
//            "width": 500,
//            "height": 1001,
//            "bg_width": 750,
//            "bg_height": 1528
//          }

        ]
      },
      resData: {},
      dialogPreview: false,
      dialogBanner: false,
      dialogPicture: false,
      dialogVideo: false,
      dialogSlider: false,
      dialogTextMap: false,
      banner: false,
      dialogWidth: 0,
    };
  },

  components: {
//    "my-ldyUpload": ldyUpload,
    "my-ldyPreview": ldyPreview,
    "my-ldyBanner": ldyBanner,
    "my-ldyImage": ldyImage,
    "my-ldyVideo": ldyVideo,
    "my-ldySlider": ldySlider,
    "my-ldyTextImage": ldyTextImage,
  },
  created() {
    this.setDialogWidth();
  },
  mounted() {
    this.getCategoryList();
    window.onresize = () => {
      return (() => {
        this.setDialogWidth();
      })();
    };
  },
  methods: {
    //去模板列表模板
    ldyList(){
      const vm = this;
      vm.$router.push({name: 'ldyList'})

    },
    setDialogWidth() {
      //console.log(document.body.clientWidth)
      var val = document.body.clientWidth;
      const def = 620; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
      // 菜单操作
    handleOpen(key, keyPath) {
//      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
//      console.log(key, keyPath);
    },
//    选择添加组件
    handleSelect(key, keyPath) {
      //console.log(key==1);
      //this.index++
      var  modules= this.deepCopy(this.uploadData.modules);
      if(modules.length==0){
        this.index=1;
      }else{
        for(var i = 0; i < modules.length; i++) {
          if(modules[i].module_type=="1") {
            this.banner=true;
          }
        }
      }
//      之前是否上传顶部图
      if(this.banner) {
        this.index=modules.length;
      }else{
        this.index=modules.length+1;
      }
      if(key==1){
          this.dialogPreview = true;
      }else if(key==2){
        this.dialogBanner = true;
      }else if(key==3){
       //this.imgList.push({ num:this.index });
         this.dialogPicture = true;
      }else if(key==4){
      //this.videoList.push({ num:this.index });
        this.dialogVideo = true;
      }else if(key==5){
      //this.sliderList.push({ num:this.index });
        this.dialogSlider = true;
      }else if(key==6){
        //this.sliderList.push({ num:this.index });
        this.dialogTextMap = true;
      }
    },
    // 复制链接方法
    onCopy(e) {
      this.$message.success("复制成功");
    },
    onError(e) {
      this.$message.warning("该浏览器不支持自动复制");
    },
    // 获取模板类型
    getCategoryList(){
      return new Promise((resolve, reject) => {
        let queryObj = {
          //token: this.mob_token,
          key: 'game_category',
        };
        this.$api.wyChoices(queryObj).then((res) => {
          if (res.code == "0") {
            this.categoryList=res.data;
            //console.log(this.categoryList);
          }
        });
      });
    },
    //选择模板类型
    chooseCategory() {
//      console.log(this.uploadData.category);
    },
    //修改
    modify(key,num){
    //      console.log(num);
      if(key==1){
        this.dialogPreview = true;
      }else if(key==2){
        this.dialogBanner = true;
      }else if(key==3){
        this.index=num;
        this.dialogPicture = true;
      }else if(key==4){
        this.index=num;
        this.dialogVideo = true;
      }else if(key==5){
        this.index=num;
        this.dialogSlider = true;
      }else if(key==6){
        this.index=num;
        this.dialogTextMap = true;
      }
    },
//  预览图添加、修改
    getViewImgUrl(data) {
//      console.log(data);
      this.dialogPreview=false;
      this.uploadData.view_img=data;
    },
//  顶部图添加、修改
    getHeaderImgUrl(data) {
//       console.log(data);

       this.dialogBanner=false;
       this.headerImg=this.deepCopy(data);
       this.uploadData.modules.push(this.headerImg);
//       console.log(this.uploadData);
    },
    // 单图，文字图，视频和轮播组件返回的数据
    getResUrl(data) {
       this.resData = this.deepCopy(data);
//      console.log(this.resData);
//      console.log(data.resource_url);
//      console.log(this.uploadData.modules);
      var length;
      for(var i = 0; i < this.uploadData.modules.length; i++) {
        if(this.uploadData.modules[i].module_type=="1") {
          this.banner=true;
        }
      }
      if(this.banner){
        // 之前上传了顶部图
        length=this.uploadData.modules.length;
        this.updateData(length,this.resData);
      }else{
    //        之前没有上传顶部图
        length=this.uploadData.modules.length+1;
        this.updateData(length,this.resData);
      }

//      this.uploadData.modules.push(this.resData);
//      this.index++;

      if(data.module_type=="2"){
        this.dialogPicture=false;
      }else if(data.module_type=="3"){
        this.dialogVideo=false;
      }else if(data.module_type=="4"){
        this.dialogSlider=false;
      }else if(data.module_type=="5"){
        this.dialogTextMap=false;
      }
//      console.log(this.uploadData);
    },
    // 更新单图，文字图，视频和轮播组件的数据
    updateData(length,data){
//       console.log(this.uploadData.modules);
      //      修改
      if(length>data.index){
        for(var i = 0; i <this.uploadData.modules.length; i++) {
          if(this.uploadData.modules[i].index == data.index) {
            this.uploadData.modules[i]=data;
          }
        }
      }else{
        //        添加
        this.uploadData.modules.push(data);
      }
    },
    deepCopy(obj) {
      //数组的深拷贝
      let temp = obj.constructor === Array ? [] : {};
      for (let val in obj) {
        temp[val] =
          typeof obj[val] == "object" ? this.deepCopy(obj[val]) : obj[val];
      }
      return temp;
    },
    //删除预览图
    delPreview(k){
      //console.log(k);
      this.$confirm(`确定删除吗？`).then(() => {
       for (var key in this.uploadData) {
            //console.log(key);     //获取key值
            if(key==k){
               this.uploadData[key] = '';
            }
            //console.log(this.uploadData[key]); //获取对应的value值
        }
//        console.log(this.uploadData);
      }).catch(() => {

      });
    },
    //删除顶部图
    delBanner(num,src){
       //console.log(num);
       //console.log(src);
      // console.log(this.uploadData.modules);
       this.$confirm(`确定删除吗？`).then(() => {
          var  modules= this.deepCopy(this.uploadData.modules);
          //console.log(modules);
          this.headerImg.resource_url="";
          for(var i = 0; i <modules.length; i++) {
              if(modules[i].resource_url == src) {
                 modules.splice(i, 1);
              }
          }
          this.uploadData.modules=modules
          //console.log(this.uploadData.modules);
       }).catch(() => {

       });
    },
    //删除单图、视频或者轮播
    delModule(num,src){
//      console.log(num);
      //console.log(src);
      this.$confirm(`确定删除吗？`).then(() => {
         var  modules= this.deepCopy(this.uploadData.modules);
         //console.log(modules);
         for(var i = 0; i < modules.length; i++) {
//             console.log(modules[i].index); //获取对应的value值
             if(modules[i].index> num) {
                modules[i].index=parseInt(modules[i].index)-1;
             }
             if(modules[i].resource_url == src) {
                modules.splice(i, 1);
               i=i-1;
             }
         }
         this.uploadData.modules=modules;
//         console.log(this.uploadData.modules);
      }).catch(() => {

      });

    },
    // 提交
    submit() {
      const vm = this;
      return new Promise((resolve, reject) => {
        this.$api.addLdy(this.uploadData).then((res) => {
          if (res.code == "0") {
//            console.log(res);
//            alert("提交成功~")
            this.$message({
              message: '提交成功~',
              type: 'success'
            });
            vm.$router.push({name: 'ldyList'})

          }
        });
      });
    },

  },
};
</script>
<style lang='stylus' scoped>
body {
}
.el-form-item {
    width: 100%;
}
a{
  text-decoration: none;
  color: #fff;
}
</style>
